<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>数字2020，你与杭州的共同记忆</title>
    <link rel="stylesheet" type="text/css" href="css/resize.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script>

    (function(win, doc) {
        var docEl = doc.documentElement,
            resizeEvt = 'oritationchange' in window ? 'oritationchange' : 'resize';
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
        var recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
        }

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DomContentLoaded', recalc, false);
    })(window, document)
    </script>
</head>

<body>
    <div style="position:relative;width:100%;height:100%;top:0;left:0;">
        <div id="root" style="position:relative;width:100%;height:100%;top:0;left:0;">
          <div class="bg-mp3"></div>

          <div id="loading">
              <div class="loading-wrap">
                <span id="loading-arrow" class="loading-arrow">0%</span>
              </div>
          </div>


          <!-- ���������� -->
          <div class="top-box">
            <div class="top">
              <div class="progress-box">
                <div class="progress-bar">
                  <div class="t"></div>
                  <div class="b"></div>
                </div>
                <img index="0" class="tab0" src="images/list01.png">
                <img index="1" class="tab1" src="images/list02.png">
                <img index="2" class="tab2" src="images/list03.png">
                <img index="3" class="tab3" src="images/list04.png">
                <img index="4" class="tab4" src="images/list05.png">
              </div>
            </div>
          </div>
      
          <!--����-->
          <div class="fm" id="fm">
<!--            <div class="logo">-->
<!--                <img src="images/logo.png" alt>-->
<!--            </div>-->
            <div class="fm-start"></div>
          </div>

          <!-- 第一页 消费篇 -->
          <div class="first-page">
            <img class="first-page-tips" src="images/first-page-tips.png">
            <div class="box">
              <img class="ok" src="images/ok.png" alt>
              <img class="err" src="images/err.png" alt>
              <span class="err-btn"></span>
              <span class="err-btn"></span>
              <span class="ok-btn"></span>
            </div>
          </div>

          <!-- 答题-->
          <div class="answer-btn"></div>

          <!-- 答题叶 -->
          <div class="answer-page">
            <div class="answer-mask">
              <div class="choose-btn choose-1"></div>
              <div class="choose-btn choose-2"></div>
              <div class="choose-btn choose-3"></div>
            </div>
          </div>
          <!-- 内容页-->
          <div class="nice-btn"></div>
            <!-- 第一项背景页-->
          <div class="one-page"></div>

          <!-- 答题叶 -->
          <div class="nice-page">
            <div class="nice-mask">
            </div>
          </div>


          <!-- 数据解锁按钮 -->
          <div class="next-btn"></div>
            <!-- 页面中图片 -->
          <div class="home-page"></div>

          <!-- ���һҳ -->
          <div class="last-page">
            <div class="mask">
              <div class="share"></div>
            </div>
            <div class="box">
              <div class="title">
                <img id="share-title" src alt>
              </div>
              <div class="text-1">
                <img id="share-text1" src alt>
              </div>
              <div class="text-2">
                <img id="share-text2" src alt>
              </div>
              <div class="share-btn"></div>
            </div>
          </div>

          <div class="jia-page" id="jia-page">
               <div class="car"></div>
          </div>


          <!-- ��Ƶ -->
          <div id="video-box" class="vider-box">
            <div class="video-wrap">
              <video playsinline preload="auto" muted id="video" src></video>
            </div>
          </div>
          <div class="graph-content" >
            <div id="firstPage-graph1" style="width:600px;height: 300px;">

            </div>
            <div id="firstPage-graph2" style="width:600px;height: 300px;">
            </div>
          </div>
            <div class="graph-content2" >
                <div id="firstPage-graph3" style="width:650px;height: 280px;">
                </div>

            </div>


          <!-- 视频播放页面 -->
          <audio id="aud1" preload="auto" autoplay="autoplay" loop="true" src="media/2.mp3"></audio>
        </div>
    </div>
    <!--������������ʾ,����ԭ�����-->
    <div id="orientLayer" class="mod-orient-layer">
        <div class="mod-orient-layer__content">
            <i class="icon mod-orient-layer__icon-orient"></i>
            <div class="mod-orient-layer__desc">杭州生活图鉴</div>
        </div>
    </div>
    <style type="text/css">
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }

        30% {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg)
        }

        60% {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg)
        }

        90% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }

        100% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }
    }

    @-webkit-keyframes rotation {
        0% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }

        30% {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg)
        }

        60% {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg)
        }

        90% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }

        100% {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg)
        }
    }

    .mod-orient-layer {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        z-index: 9997
    }

    .mod-orient-layer__content {
        position: absolute;
        width: 100%;
        top: 45%;
        margin-top: -75px;
        text-align: center
    }

    .mod-orient-layer__icon-orient {
        display: inline-block;
        width: 67px;
        height: 109px;
        /*background-image: url();*/
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-animation: rotation infinite 1.5s ease-in-out;
        animation: rotation infinite 1.5s ease-in-out;
        -webkit-background-size: 67px;
        background-size: 67px
    }

    .mod-orient-layer__desc {
        margin-top: 20px;
        font-size: 15px;
        color: #fff
    }

    .mod-orient-layer__desc {
        margin-top: 20px;
        font-size: 15px;
        color: #fff
    }

    /* ������ʾ */
    @media all and (orientation: portrait) {
        #orientLayer {
            display: none;
        }
    }

    @media all and (orientation: landscape) {
        #orientLayer {
            display: block;
        }
    }
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/iphone-inline-video.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
    <script src="js/graph.js"></script>
    <script src= "http://pingjs.qq.com/ping.js"></script>
    <script>
      if (typeof (pgvMain) == 'function') {
        pgvMain();
      };
      var shareData = {
        title: '数字里的2020，是我们共同的回忆',
        desc: '是否有一个数字触动了你？',
        img: 'http://www.fm898989.com/images/wshare2020.png',
        link: window.location.href
      };
      //��������
      var MShare = {
        getScript: function (file, callback, charset) {
          var doc = document,
            head = doc.getElementsByTagName('head')[0],
            js = doc.createElement('script')
          charset && js.setAttribute('charset', charset)
          js.setAttribute('src', file)
          head.appendChild(js)
          if (!(/*@cc_on!@*/ 0)) {
            js.onload = function () {
              callback && callback()
            }
          } else {
            js.onreadystatechange = function () {
              if (js.readyState == 'loaded' || js.readyState == 'complete') {
                js.onreadystatechange = null
                callback && callback()
              }
            }
          }
          return false
        },
        mqq: function () {
          this.getScript('//pub.idqqimg.com/qqmobile/qqapi.js?_bid=152', function () {
            try {
              window.mqq.data.setShareInfo({
                share_url: shareData.link,
                title: shareData.title,
                desc: shareData.desc,
                image_url: shareData.img
              })
            } catch (e) { }
          })
        },
        qqNews: function () {
          if (window.TencentNews && window.TencentNews.setShareArticleInfo) {
            window.TencentNews.setShareArticleInfo(
              shareData.title,
              shareData.desc,
              shareData.desc,
              shareData.link,
              shareData.img
            )
          }
        },
        WeiXin: function () {
          WeixinJSBridge.on('menu:share:timeline', function (e) {
            var data = {
              img_width: '120',
              img_height: '120',
              img_url: 'http://www.fm898989.com/images/wshare2020.png',
              link: shareData.link,
              desc: '是否有一个数字触动了你？',
              title: shareData.title
            }
            WeixinJSBridge.invoke('shareTimeline', data, function (res) {
              WeixinJSBridge.log(res.err_msg)
            })
          })
          WeixinJSBridge.on('menu:share:weibo', function () {
            WeixinJSBridge.invoke('shareWeibo', { content: shareData.desc, url: shareData.link }, function (res) {
              WeixinJSBridge.log(res.err_msg)
            })
          })
          WeixinJSBridge.on('menu:share:appmessage', function (argv) {
            WeixinJSBridge.invoke(
              'sendAppMessage',
              {
                img_width: '120',
                img_height: '120',
                img_url: 'http://www.fm898989.com/images/wshare2020.png',
                link: shareData.link,
                desc: '是否有一个数字触动了你？',
                title: shareData.title
              },
              function (res) {
                WeixinJSBridge.log(res.err_msg)
              }
            )
          })
          window.WeixinJSBridge.invoke(
            'currentMpInfo',
            {
              brandIcon: 'http://mat1.gtimg.com/news/images/inews/2020/feiyan/favicon.ico'
            },
            () => { }
          )
        },
        init: function () {
          var _this = this
          _this.qqNews()
          document.addEventListener('WeixinJSBridgeReady', function () {
            _this.WeiXin()
          })
        }
      }
      MShare.init()
    </script>

    <script>
    /*ǿ�ƺ���*/
    function horizontalScreen() {
        // transform ǿ�ƺ���
        var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        $("#root").css({
            "transform": "rotate(90deg) translate(" + ((conH - conW) / 2) + "px," + ((conH - conW) / 2) + "px)",
            "-webkit-transform": "rotate(90deg) translate(" + ((conH - conW) / 2) + "px," + ((conH - conW) / 2) + "px)",
            "width": conH + "px",
            "height": conW + "px",
            //"margin-top":iosTopHe+"px",
            // "border-left":iosTopHe+"px solid #000",
            "transform-origin": "center center",
            "-webkit-transform-origin": "center center"
        });

        $(".content_tips").css({
            "transform": "rotate(90deg) translate(" + ((conH - conW) / 2) + "px," + ((conH - conW) / 2) + "px)",
            "-webkit-transform": "rotate(90deg) translate(" + ((conH - conW) / 2) + "px," + ((conH - conW) / 2) + "px)",
            "width": conH + "px",
            "height": conW + "px",
            //"margin-top":iosTopHe+"px",
            // "border-left":iosTopHe+"px solid #000",
            "transform-origin": "center center",
            "-webkit-transform-origin": "center center"
        });
    }

    horizontalScreen();

    window.addEventListener("resize", horizontalScreen, false)
    </script>
</body>

</html><!--[if !IE]>|xGv00|77d4cff0e9a436f79a1bb455baf24f33<![endif]-->